<template>
    <el-aside class="space-aside">
        <n-menu :options="menuOptions" />
    </el-aside>
</template>

<script setup>
import { RouterLink } from 'vue-router'
import { Star } from '@element-plus/icons-vue'

const renderIcon = (icon) => {
    return () => h(NIcon, null, { default: () => h(icon) });
}

const menuOptions = [
    {
        label: () => h(
            RouterLink,
            {
                to: {
                    name: "belike",
                }
            },
            { default: () => "喜欢" }
        ),
        key: "belike",
        icon: renderIcon(Star)
    },
    {
        label: () => h(
            RouterLink,
            {
                to: {
                    name: "belike",
                }
            },
            { default: () => "收藏" }
        ),
        key: "collect",
        icon: renderIcon(Star)
    },
    {
        label: () => h(
            RouterLink,
            {
                to: {
                    name: "belike",
                }
            },
            { default: () => "历史记录" }
        ),
        key: "history",
        icon: renderIcon(Star)
    },
    {
        label: () => h(
            RouterLink,
            {
                to: {
                    name: "information",
                }
            },
            { default: () => "个人信息" }
        ),
        key: "information",
        icon: renderIcon(Star)
    },
    {
        label: () => h(
            RouterLink,
            {
                to: {
                    name: "setting",
                }
            },
            { default: () => "设置" }
        ),
        key: "setting",
        icon: renderIcon(Star)
    },
];
</script>

<style scoped>
.space-aside {
    background-color: #ffffff9a;
    border-radius: 8px;
}
</style>